<template>
  <section>
    <el-tabs v-model="page" @tab-click="selPage">
      <el-tab-pane label="所有挂号" name="allRegister" >
        <el-row>
          <el-col :span="12">
            放一个条件筛选
          </el-col>
          <el-col :span="10">
            <el-button type="text" @click="addRegister" style="float: right">新建挂号</el-button>
          </el-col>
        </el-row>
        <el-table :data="registerList" border style="text-align: center" >
          <el-table-column type="index" width="30"/>
          <el-table-column prop="created" label="挂号时间" :formatter="formatDate" width="160" header-align="center">
          </el-table-column>
          <el-table-column prop="data.section" label="科室" header-align="center" >
            <!--<template slot-scope="scope">-->
              <!--{{change(scope.row)}}-->
            <!--</template>-->
          </el-table-column>
          <el-table-column prop="data.doctor" label="医生" header-align="center">
            <!--<template slot-scope="scope">-->
              <!--{{change(scope.row)}}-->
            <!--</template>-->
          </el-table-column>
          <el-table-column prop="data.userName" label="病人" header-align="center">
          </el-table-column>
          <el-table-column prop="sourceType.name" label="途径" header-align="center">
          </el-table-column>
          <el-table-column label="操作" header-align="center">
            <template slot-scope="scope">
              <el-dropdown  >
                <i class="el-icon-setting"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>作废</el-dropdown-item>
                  <el-dropdown-item>退号</el-dropdown-item>
                  <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="查看问卷" name="allQa" >

        <el-table :data="answerList" border style="text-align: center" >
          <el-table-column type="index" width="30"/>
          <el-table-column label="答卷" :formatter="formatDate" width="160" header-align="center">
            <template slot-scope="scope">
              {{scope.row.instance.title}}
            </template>
          </el-table-column>
          <el-table-column prop="begin" label="答题时间" :formatter="formatDate" width="160" header-align="center">
          </el-table-column>
          <el-table-column label="操作" header-align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="btnDetailAnswer(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="新建挂号" :visible.sync="showEdit">
      <checkRegister></checkRegister>
    </el-dialog>
  </section>
</template>

<script>
  import DateUtils from '@/common/DateUtils'
  import DateFormat from '@/common/date-formater'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  import checkRegister from "../order/checkRegister"
  export default {
    name: "createRegister",
    components: {checkRegister},
    data() {
      return {
        answerList:[],
        loading:false,
        totalPage:0,
        users:[],
        sections:null,
        doctors:null,
        registerList:null,
        sourceTypes:null,
        page:'allRegister',
        showEdit:false,
        registerDetail:{
          doctorId:'',
          sectionId:'',
          userId:'',
          // date:DateFormat.format(new Date().getTime()),
          // time:DateFormat.formatime(new Date().getTime()),
          sourceTypeCode:'',
          name:''
        }
      }
    },
    created(){
      // console.log(this.department)
      //获取所有挂号
      this.getRegisterList()
      this.getHisSectionList()
      this.getUserList(5)
      this.getSourceTypeList()
    },
    watch:{
      page(nv,ov){

      }
    },
    computed:{
      ...mapGetters(['department']),
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      change(a){
        console.log(a)
      },
      getSourceTypeList(){
        this.fetch({name:"getSourceTypeList"})
          .then(res=>{
            // console.log(res)
            this.sourceTypes=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getHisSectionList(){
        this.fetch({name:"getHisSectionList",data:{departmentId:this.department.id}})
          .then(res=>{
            this.sections=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getUserList(groupId){
        this.fetch({name:"getUserList",data:{groupId}})
          .then(res=>{
            console.log(res)
            this.doctors=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      remoteMethod(keyword) {
        this.loading=true
        this.fetch({name:"getUserList",data:{keyword}})
          .then(res=>{
            this.users=res
            this.loading = false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      selPage(e){
        if(e.name === 'allQa'){
          //加载所有问卷答卷
          this.getAnswerList()
        }
      },
      getAnswerList(){
        this.fetch({name:"getAnswerList"})
          .then(res=>{
            console.log(res)
            this.answerList = res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      btnDetailAnswer(row){
        console.log(row)
        this.showAnswerDialog = true
      },
      formatDate(row, column, cellValue, index){
        return DateFormat.formatDatetime(cellValue)
      },
      goPage(val){
        this.getRegisterList(val-1)
      },
      getRegisterList(pageNo){
        this.fetch({name:"getRegisterList",data:{page:pageNo?pageNo:0}})
          .then(res=>{
            console.log(res)
            this.registerList=res.content
            this.totalPage = res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addRegister(){
        this.showEdit=true
      },
      createRegisterBtn(){
        let tmp={
          ...this.registerDetail,
          departmentId:this.department.id,
          time:DateFormat.formatime(new Date().getTime())>12?2:1,
          date:DateFormat.format(new Date().getTime())
        }
        tmp.data={
          department:this.department.name,
          doctor:this.doctors.find(d=>d.id === this.registerDetail.doctorId).name,
          section:this.sections.find(d=>d.id === this.registerDetail.sectionId).name,
          userName:this.users.find(d=>d.id === this.registerDetail.userId).name
        }
        console.log(tmp)
        // this.createRegister(data)
      },
      createRegister(data){
        this.fetch({name:"createRegister",data:data})
          .then(res=>{
            console.log(res)
            this.showEdit=false
            this.getRegisterList()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
